@use "sass:map";
@import 'framework/variables';

/*
 * Application chrome
 */

.application-chrome {
  // Scroll bars styles
  scrollbar-color: var(--gl-color-neutral-400) transparent;

  @media (forced-colors: active) {
    scrollbar-color: var(--gl-color-neutral-950) transparent;
  }

  // Variable overrides
  @include media-breakpoint-up(xl) {
    &.page-with-panels .page-with-super-sidebar {
      --application-bar-left: 0px; // stylelint-disable-line length-zero-no-unit
    }
  }

  // Fix height
  &, body {
    @apply gl-h-full;
  }

  body {
    @apply gl-flex gl-flex-col;
    // Application chrome background
    background-color: var(--super-sidebar-bg);
  }

  // Disable global bootstrap modal backdrop when using panels
  .modal-open:has(.panel-content .modal.show) {
    .modal-backdrop {
      display: none;
    }
  }

  // When using panels, remove top padding
  &.page-with-panels .layout-page {
    @apply gl-pt-0 #{!important};
    @apply gl-pb-3;
  }

  // Free trial button
  .topbar-signup-button {
    @apply gl-bg-neutral-800 gl-border-neutral-800 dark:gl-bg-neutral-100 dark:gl-border-neutral-100 #{!important};
  }

  // Super topbar
  .super-topbar {
    @apply gl-pl-3 sm:gl-pl-4 gl-pr-3;
    height: var(--top-bar-height);

    // Placeholder styles
    .topbar-search-button-placeholder {
      font-weight: 320;
      line-height: 1.25;
    }

    // Search button
    .topbar-search-button {
      @apply gl-text-subtle gl-border-alpha-dark-24 #{!important};

      kbd {
        @apply gl-border-strong gl-font-semibold gl-text-subtle gl-shadow-none dark:gl-border-transparent;
      }

      @media (forced-colors: active) {
        border: 1px solid !important;
      }
    }

    .topbar-search-button:not(:hover):not(:focus):not(:active) {
      @apply dark:gl-bg-alpha-light-8 dark:gl-border-alpha-light-16 #{!important};
    }
  }

  .header-message,
  .footer-message {
    position: static !important;
  }

  // Quick search overlay
  #super-sidebar-search-modal {
    @apply gl-pt-0;

    /* stylelint-disable scss/at-rule-no-unknown */
    @media (prefers-reduced-motion: no-preference) {
      transition-property: opacity;
      transition-timing-function: $gl-easing-out-cubic;

      &.show {
        opacity: 1;
        transition-duration: 0.2s;

        .modal-dialog {
          scale: 1;
          transition-duration: 0.2s;
        }
      }

      &:not(.show) {
        opacity: 0;
        transition-duration: 0.1s;

        .modal-dialog {
          scale: 0.8;
          transition-duration: 0.1s;
        }
      }

      @starting-style {
        opacity: 0;
      }

      .modal-dialog {
        transform-origin: top center;
        transform: none !important;
        transition-property: scale;
        transition-timing-function: $gl-easing-out-cubic;

        @starting-style {
          scale: 0.8;
        }
      }
    }
  }

  // Super sidebar
  .super-sidebar-wrapper {
    @apply gl-w-0 gl-h-0 lg:gl-h-auto;
  }

  @media (max-width: $breakpoint-xl - 1) {
    #super-sidebar {
      width: min(80%, 320px);
    }
  }

  @media (min-width: $breakpoint-xl) {
    .super-sidebar-wrapper {
      width: auto;
    }

    .super-sidebar.super-sidebar-loading {
      position: relative;
      left: 0;
      top: 0;

      &:not(.super-sidebar-is-icon-only) {
        width: calc(#{$super-sidebar-width} - var(--gl-spacing-scale-3));
      }

      &.super-sidebar-is-icon-only {
        width: calc(#{$gl-button-medium-size} + var(--gl-spacing-scale-3));
      }
    }

    .ai-panels {
      min-width: var(--ai-navigation-rail-size-with-gap);
    }
  }

  .page-with-super-sidebar-collapsed {
    .super-sidebar {
      @apply gl-m-0;
    }
  }

  @media (max-width: $breakpoint-xl - 1) {
    .super-sidebar.super-sidebar-loading {
      position: static;
      width: 0 !important;
    }
  }

  // Super sidebar item
  .super-sidebar-nav-item {
    @apply gl-rounded-lg #{!important};
  }

  // Application background item hover/focus states
  .super-sidebar .super-sidebar-nav-item,
  .dashboard-shortcuts-button,
  .ai-nav-icon,
  #create-menu-toggle {
    &:hover,
    &:focus,
    &.with-mouse-over-flyout {
      @apply gl-bg-alpha-dark-6 dark:gl-bg-alpha-light-8 #{!important};
    }
  }

  // Siderail agents selector icon
  .ai-nav-icon-agents .gl-new-dropdown-icon-only {
    border-radius: 100% !important;
  }

  // Position for search overlay when Performance bar is visible
  &.with-performance-bar #super-sidebar-search-modal {
    padding-top: $performance-bar-height;
  }

  // Quick search overlay search input
  &.page-with-panels .global-search-modal .modal-content {
    @apply gl-rounded-[1rem] #{!important};

    .gl-search-box-by-type-input-borderless {
      @apply gl-rounded-[0.75rem];
    }
  }

  // work item drawer correct background colors
  .work-item-drawer {
    .description-more::before {
      background: linear-gradient(180deg, transparent 0%, var(--gl-background-color-default) 100%) !important;
    }

    .show-all-btn {
      background-color: var(--gl-background-color-default) !important;
    }

    .timeline-entry:not(.draft-note):last-child::before {
      @apply gl-bg-default #{!important};
    }
  }

}

/*
 * Panels
 */

.page-with-panels {
  --ai-panel-height: 3rem; //= 48px

  @include media-breakpoint-up(lg) {
    --ai-panel-height: 0px; // stylelint-disable-line length-zero-no-unit
  }

  // Layout
  &.page-with-panels .layout-page {
    @apply gl-flex gl-gap-0 lg:gl-gap-3 gl-items-stretch gl-justify-start lg:gl-justify-center gl-flex-col lg:gl-flex-row lg:gl-pl-0 gl-pt-3 lg:gl-pb-3 sm:gl-pr-3;
    min-height: 0;
    flex: 1;
  }

  // Unset fixed positions
  #js-peek,
  #super-sidebar,
  .header-logged-out {
    @apply gl-relative #{!important};
    @apply gl-top-0;
  }

  @include media-breakpoint-down(lg) {
    .page-with-super-sidebar:not(.super-sidebar-has-css-transitions-blocked) #super-sidebar {
      @apply gl-fixed #{!important};
      @apply gl-rounded-r-[1rem];
    }
  }

  // Super sidebar height
  #super-sidebar {
    @apply gl-h-full lg:-gl-mr-3;

    .contextual-nav {
      @apply gl-pt-2;
    }
  }

  // Panels container
  .panels-container {
    @apply gl-relative gl-grow gl-flex gl-pr-0 gl-pb-0;
    min-height: 0;

    // Inside the panels container, everything that calculates an offset from
    // the top needs to ignore application header height, system header height,
    // performance bar height, header height and top bar height, since these
    // all lie outside of the panels. Note that the `px` IS REQUIRED here for
    // these variables to function properly.
    --application-header-height: 0px; // stylelint-disable-line length-zero-no-unit
    --system-header-height: 0px; // stylelint-disable-line length-zero-no-unit
    --performance-bar-height: 0px; // stylelint-disable-line length-zero-no-unit
    --header-height: 0px; // stylelint-disable-line length-zero-no-unit
    --top-bar-height: 0px; // stylelint-disable-line length-zero-no-unit

    .panel-content-inner,
    .vue-portal-target .work-item-drawer-content {
      // This prevents the scrollbar transparency rule above from breaking scrollbars in dropdown menus
      .dropdown-menu {
        background: var(--gl-background-color-overlap);
      }

      .container-fluid {
        @apply gl-px-0 lg:gl-px-3;
      }

      // Hide alert wrapper if it's empty
      > .alert-wrapper:not(:has(*)) {
        @apply gl-hidden;
      }
    }
  }

  // Add some left margin on pages with no left sidebar (like /search)
  .panels-container {
    @apply sm:gl-ml-3;
  }

  @include media-breakpoint-up(lg) {
    .page-with-super-sidebar {
      .super-sidebar-loading ~ .panels-container,
      .super-sidebar-wrapper ~ .panels-container {
        margin-left: 0;
      }
    }
  }

  // All panels
  .paneled-view.static-panel,
  .paneled-view.contextual-panel,
  .paneled-view.ai-panels .ai-panel
  {
    @media (forced-colors: active) {
      border: 1px solid;
    }
  }

  // Contextual panel
  .paneled-view.contextual-panel {
    @apply gl-overflow-y-auto gl-flex-1 gl-rounded-lg gl-bg-default empty:gl-hidden gl-h-full;
    @apply gl-z-[252] gl-w-full sm:gl-w-8/10 gl-right-0;
    display: flex;
    flex-direction: column;
  }

  // AI panel
  .paneled-view.ai-panels {
    overflow: inherit;
    @apply gl-px-0 sm:gl-px-3 lg:gl-px-2 lg:-gl-mx-2;
    --ai-panel-width: clamp(25rem, 20vw, 35rem);
    --ai-panels-gap: var(--gl-spacing-scale-3);
    --ai-navigation-rail-size: #{$gl-button-medium-size};
    --ai-navigation-rail-size-with-gap: calc(var(--ai-navigation-rail-size) + var(--ai-panels-gap));

    .ai-panel-header {
      z-index: $top-bar-z-index;
      @apply gl-sticky #{!important};
      @apply gl-top-0 gl-py-3 gl-px-3;
    }

    .ai-nav-icon-active,
    .ai-nav-icon-active:hover {
      background-color: var(--super-sidebar-nav-item-current-bg);
      color: var(--super-sidebar-accent-color-fg);
    }

    @media (max-width: $breakpoint-lg - 1) {
      --ai-navigation-rail-size: calc(#{$gl-button-medium-size} + var(--gl-spacing-scale-3) * 2);
    }
  }

  .ai-panel-body {
    max-height: calc(100vh - #{$header-height} - #{$performance-bar-height} - #{$top-bar-height} - #{-$gl-spacing-scale-7});
  }

  &.with-performance-bar .ai-panel-body {
    max-height: calc(100vh - #{$header-height} - #{$top-bar-height} - #{$gl-spacing-scale-9});
  }

  .ai-panel-header-actions {
    border-left: 1px solid var(--super-sidebar-bg);
    @apply gl-pl-3;
  }

  .ai-panel-maximized .paneled-view {
    flex-grow: 1;
  }

  // Hiding all other panels when DAP is maximized
  .ai-panel-maximized .panels-container {
    display: none;
  }

  // Preserving other panels when DAP is maximized on bigger screens
  @media(min-width: #{$paneled-layout-ultra-wide-breakpoint}) {
    .ai-panel-maximized .paneled-view {
      width: auto;
    }

    .ai-panel-maximized .panels-container {
      display: flex;
    }
  }

  // Panel header
  .panel-header .top-bar-fixed,
  .work-item-drawer-header {
    @apply gl-bg-default gl-shadow-none gl-relative gl-px-4 lg:gl-px-5 #{!important};
    z-index: 99;
    border-bottom: 1px solid var(--super-sidebar-bg);
  }

  .content-wrapper {
    display: flex;
    flex-direction: column;
  }

  // Panel content
  .panel-content,
  .work-item-drawer {
    // a slight padding is added to the panel itself so that scrollbar does not get covered by the rounded edge of the panel
    // we're using padding instead of margin so that fixed elements connect with the bottom edge of the panel
    @apply gl-pb-3;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    contain: layout;
    // a margin is required for the panel element so that it works exactly like the native viewport,
    // which compensates for the scrollbar size when using fixed position
    margin-right: var(--scrollbar-width, 0);
  }

  &.issue-boards-page .panel-content,
  &.issue-boards-page .work-item-drawer {
    @apply gl-pb-0;
  }

  .panel-content-inner,
  .work-item-drawer-content {
    overflow-x: hidden;
    overflow-y: scroll;
  }

  .panel-content-inner,
  .work-item-drawer-content,
  .work-item-drawer-header {
    margin-right: calc(var(--scrollbar-width, 0) * -1);
  }

  .panel-content-inner {
    @apply gl-px-3;
    flex: 1;
  }

  .work-item-drawer-content {
    @apply gl-px-5;
    flex: 1;
  }

  // duplicate class to override Tailwind
  .work-item-drawer-header.work-item-drawer-header {
    @apply gl-py-4;
    width: auto;
  }

  .contextual-panel > .vue-portal-target {
    flex: 1;
    min-height: 0;
  }

  // Fix design management fullscreen display in panels
  .design-detail-layout .panel-content {
    @apply gl-fixed gl-inset-0 gl-overflow-visible gl-rounded-none gl-max-w-none gl-z-1 gl-h-screen #{!important};
  }

  // Content adjustments within panels
  .paneled-view {
    @apply gl-overflow-clip;
    @apply gl-rounded-[1rem] #{!important};

    // Work item drawer
    .work-item-drawer {
      @apply gl-h-full gl-pt-0;
    }

    // Issue sticky header
    .issue-sticky-header:not(.merge-request-sticky-header) {
      @apply gl-w-full gl-border-b-subtle;

      .work-item-sticky-header-text {
        @apply gl-px-3 @lg/panel:gl-px-4 gl-py-2;
      }
    }

    .work-item-drawer .issue-sticky-header:not(.merge-request-sticky-header) {
      top: $header-height !important;

      .work-item-sticky-header-text {
        @apply gl-px-5;
      }
    }

    // Legacy merge request sticky header (Firefox)
    .issue-sticky-header.merge-request-sticky-header .issue-sticky-header-text {
      @apply gl-px-3;
    }

    // Issue boards height
    .boards-app,
    .issue-boards-content,
    .issue-boards-content > .content {
      @apply gl-h-full;
    }

    // MR sidebar
    .work-item-attributes-wrapper,
    .issuable-sidebar.is-merge-request .issuable-context-form {
      @include media-breakpoint-up(lg) {
        top: calc(#{$mr-sticky-header-height} - 1px) !important;
        @apply gl-pr-4 #{!important};
      }
    }

    // Project sidebar
    @include media-breakpoint-up(lg) {
      .project-page-indicator:not(.hidden) + .project-page-layout .project-page-sidebar {
        top: calc(#{$gl-spacing-scale-4}) !important;
      }
    }

    // User profile sidebar
    @include media-breakpoint-up(lg) {
      .user-profile .profile-header {
        top: -1px !important;
      }
    }

    // Sticky flash alert
    .flash-container:has(.gl-alert) {
      top: auto !important;
    }

    // Commits diff file tree header
    .diff-file .file-title-flex-parent {
      @include media-breakpoint-up(md) {
        &.is-commit,
        &.is-compare,
        &.is-wiki {
          top: 0 !important;
        }
      }
    }
  }

  &.issue-boards-page .panel-content-inner,
  &.group-epics-roadmap-html .panel-content-inner {
    @apply gl-px-0;
    overflow: auto;
  }

  // Override Tailwind
  .boards-app.boards-app {
    height: var(--panel-content-inner-height);
    overflow-y: hidden;

    .issues-details-filters {
      @apply gl-px-3;
    }
  }

  .board-content {
    @apply gl-pt-5;
    @apply gl-px-3;
    min-height: 0;
    overflow-y: hidden;
  }

  // Override Tailwind
  .boards-list.boards-list {
    display: flex;
    padding: 0;
    margin: 0;
    border: 0;
    overflow-y: hidden;
    min-height: 0;
    @apply gl-mb-3;
    @apply gl-rounded-b-lg;
  }

  .boards-list,
  .board-column {
    @apply gl-gap-3;
  }

  .boards-list .board.board {
    padding: 0;
  }

  .board-swimlanes .board:first-of-type {
    padding-left: 0;
  }

  // Sidebar adjustments
  :where(.right-sidebar-expanded) {
    .content-wrapper {
      @apply gl-pr-0 #{!important};
    }

    &:not(.wiki-sidebar):not(.build-sidebar):not(.is-merge-request) .panel-content-inner {
      @container content-panels (width >= #{map.get($breakpoints, 'sm')}) {
        padding-right: $right-sidebar-width;
      }
    }
  }

  // MR changes tab
  .container-fluid:not(.container-limited),
  .container-fluid.rd-page-container {
    .detail-page-header,
    .detail-page-description,
    .merge-request-tabs-container {
      &.is-merge-request {
        max-width: $fixed-layout-width - ($gl-padding-12 * 2) !important;
      }
    }
  }

  .right-sidebar.right-sidebar-collapsed.issues-bulk-update {
    @apply gl-border-l-0;
  }

  :where(.right-sidebar-collapsed:not(.issuable-bulk-update-sidebar, .is-merge-request)) {
    .content-wrapper {
      @apply gl-pr-0 #{!important};
    }

    .panel-content-inner {
      @container content-panels (width >= #{map.get($breakpoints, 'sm')}) {
        padding-right: $right-sidebar-collapsed-width;
      }
    }
  }

  // Static and Contextual panels
  .paneled-view.static-panel,
  .paneled-view.contextual-panel {
    @apply gl-overflow-clip gl-p-0 gl-rounded-[1rem];
  }

  // AI panel
  .paneled-view.ai-panels .ai-panel {
    @include media-breakpoint-down(md) {
      @apply gl-fixed -gl-mt-2 gl-shadow-lg;
      @apply gl-left-5 #{!important};
      top: var(--header-height);
      width: calc(100% - #{$gl-spacing-scale-5 * 2});
      height: calc(100% - var(--system-header-height) - var(--performance-bar-height) - var(--header-height) - var(--ai-panel-height) + 0.5rem); // 0.5rem is to balance the -0.25rem top margin
      z-index: 999;
    }
  }

  .content-wrapper.paneled-view {
    @apply gl-pt-0;
  }

  .gl-drawer {
    width: min(calc(100% - #{$gl-spacing-scale-6}), 400px);
  }

}

/*
 * Duo chat
 */

 .application-chrome {

  // Your messages
  .duo-chat-message-container:has(.duo-chat-message .gl-avatar) {
    @apply gl-justify-end;

    .duo-chat-message {
      background-color: rgb(from var(--theme-accent-color) r g b / 15%);
      @apply gl-rounded-bl-[1rem] gl-rounded-br-none;
    }
  }

  &.gl-dark .duo-chat-message-container:has(.duo-chat-message.gl-text-feedback-info) {
    .duo-chat-message:not(:has(.error-icon)) {
      background-color: rgb(from var(--theme-accent-color) r g b / 30%);
    }
  }

  .duo-chat-message-container {
    .duo-chat-message:has(.error-icon) {
      @apply gl-bg-subtle;
    }
  }

}

/*
 * Themes
 */

.application-chrome.page-with-panels {
  // Light mode
  &:not(.gl-dark) {
    // default color to mute the gradient
    --_shade-1: hsla(from var(--theme-color) h 25 93 / 95%);
    // alternative color
    --_shade-2: hsl(from var(--theme-color) calc(h + 10) calc(s + 20) l);
    // original color
    --_shade-3: hsl(from var(--theme-color) h calc(s + 10) l);
    // bottom color
    --_shade-4: hsla(from var(--theme-color) calc(h + 20) calc(s + 20) l / 40%);

    // Temporarily unship this change as it introduced some regressions, see https://gitlab.com/gitlab-org/gitlab/-/merge_requests/204009
    // --theme-background-color: color-mix(in srgb, var(--gl-background-color-default), var(--theme-color) 2%);
    --theme-background-color: var(--gl-background-color-default);
    --theme-border-color: hsl(from var(--theme-color) h 24 90);

    body {
      background:
        radial-gradient(circle at top, rgba(255, 255, 255, 0.6), transparent 40vw),
        linear-gradient(var(--_shade-1), var(--_shade-1)),
        radial-gradient(farthest-side at 50% 0%, var(--_shade-3), transparent 50vw),
        radial-gradient(farthest-side at 50% 0%, var(--_shade-2), transparent 70vw),
        linear-gradient(-10deg, var(--_shade-4), transparent 70%),
        var(--gl-background-color-default);
      background-color: var(--super-sidebar-bg);
    }

    .ai-panels,
    .super-sidebar,
    .super-topbar {
      --theme-accent-badge-color: var(--theme-accent-color);
      --super-sidebar-bg: var(--theme-background-color);
      --super-sidebar-accent-color-fg: hsl(from var(--theme-accent-color) h calc(s - 20) 20);
      --super-sidebar-nav-item-current-bg: hsla(from var(--theme-accent-color) h s l / 16%);
      --super-sidebar-nav-item-hover-bg: hsla(from var(--theme-accent-color) h s l / 16%);
      --super-sidebar-accent-color-badge: hsl(from var(--theme-accent-color) h s 90);
      --super-sidebar-user-bar-notification-dot: hsl(from var(--theme-notification-color) calc(h - 2) s calc(l + 2));
      --super-sidebar-accent-color-bg: hsla(from var(--theme-accent-color) h s l / 16%);
    }

    .super-topbar .organization-switcher-button.gl-button:not(:hover):not(:focus):not(:active) {
      @apply gl-bg-alpha-dark-6 gl-border-default;
    }

    .super-sidebar hr {
      border-color: var(--gl-color-alpha-dark-8);
    }

    .super-sidebar-main-separator {
      @apply gl-mx-3;
    }

    .super-sidebar-is-icon-only .super-sidebar-main-separator {
      border-color: var(--gl-border-color-strong);
    }

    .super-sidebar .super-sidebar-nav-item:not(.super-sidebar-nav-item-current) .badge {
      background-color: transparent;
    }

    .super-sidebar .super-sidebar-nav-item.super-sidebar-nav-item-current:not(:hover) .badge {
      background-color: var(--_shade-1);
    }

    .super-sidebar .super-sidebar-nav-item.super-sidebar-whats-new .badge {
      color: var(--gl-color-neutral-0);
      background-color: var(--theme-accent-badge-color);
    }

    .ai-panel .ai-nav-icon-active,
    .ai-panel .ai-nav-icon-active:hover {
      background-color: var(--super-sidebar-nav-item-current-bg);
    }

    .ai-panel .ai-nav-icon-active {
      color: var(--super-sidebar-accent-color-fg);
    }
  }

  // Dark mode
  &.gl-dark {
    // default color to mute the gradient
    --_shade-1: hsla(from var(--gl-background-color-default) h s l / 75%);
    // background
    --_shade-2: hsl(from var(--theme-color) h 15 20);
    // alternative color
    --_shade-3: hsla(from var(--theme-color) calc(h + 30) s l / 70%);
    // original color
    --_shade-4: hsla(from var(--theme-color) h s l / 100%);
    // bottom color
    --_shade-5: hsla(from var(--theme-color) h s l / 55%);

    // Temporarily unship this change as it introduced some regressions, see https://gitlab.com/gitlab-org/gitlab/-/merge_requests/204009
    // --theme-background-color: color-mix(in srgb, var(--gl-background-color-default), var(--theme-color) 1%);
    --theme-background-color: var(--gl-background-color-default);
    --theme-border-color: hsl(from var(--theme-color) h 12 25);

    body {
      background:
        linear-gradient(var(--_shade-1), var(--_shade-1)),
        radial-gradient(farthest-side at 50% 0%, var(--_shade-4), transparent 50vw),
        radial-gradient(farthest-side at 50% 0%, var(--_shade-3), transparent 65vw),
        linear-gradient(-10deg, var(--_shade-5), transparent),
        var(--_shade-2);
      background-color: var(--super-sidebar-bg);
    }

    .ai-panels,
    .super-sidebar,
    .super-topbar {
      --theme-accent-badge-color: hsl(from var(--theme-accent-color) h calc(s - 10) calc(l + 20));
      --super-sidebar-bg: var(--theme-background-color);
      --super-sidebar-nav-item-current-bg: hsla(from var(--theme-accent-color) h s calc(l + 20) / 25%);
      --super-sidebar-accent-color-fg: hsl(from var(--theme-accent-color) h s 88);
      --super-sidebar-nav-item-hover-bg: hsla(from var(--theme-accent-color) h calc(s - 30) l / 16%);
      --super-sidebar-accent-color-badge: hsl(from var(--theme-accent-color) h s 85);
      --super-sidebar-user-bar-notification-dot: hsl(from var(--theme-notification-color) calc(h - 2) s calc(l + 20));
      --super-sidebar-accent-color-bg: hsla(from var(--theme-accent-color) h s l / 32%);
    }

    .super-sidebar hr {
      border-color: var(--gl-color-alpha-light-16);
    }

    .super-sidebar-main-separator {
      @apply gl-mx-3;
    }

    .super-sidebar-is-icon-only .super-sidebar-main-separator {
      border-color: var(--gl-border-color-strong);
    }

    .super-sidebar .super-sidebar-nav-item:not(.super-sidebar-nav-item-current) .badge {
      color: var(--super-sidebar-accent-color-fg);
      background-color: transparent;
    }

    .super-sidebar .super-sidebar-nav-item.super-sidebar-nav-item-current:not(:hover) .badge {
      color: var(--super-sidebar-accent-color-fg);
      background-color: var(--_shade-1);
    }

    .super-sidebar .super-sidebar-nav-item.super-sidebar-whats-new .badge {
      color: var(--gl-color-neutral-900);
      background-color: var(--theme-accent-badge-color);
    }

    .ai-panel .ai-nav-icon-active,
    .ai-panel .ai-nav-icon-active:hover {
      color: var(--super-sidebar-accent-color-fg);
      background-color: var(--super-sidebar-nav-item-current-bg);
    }

  }

  .super-sidebar:not(.super-sidebar-is-mobile) {
    background: transparent !important;
  }

  .bottom-scrim-visible,
  .top-scrim-visible {
    border-color: var(--theme-border-color);
  }

  .panel-header .top-bar-fixed,
  .work-item-drawer-header,
  .ai-panel-header {
    border-bottom: 1px solid var(--theme-border-color);
  }

  .top-bar-fixed,
  .static-panel,
  .contextual-panel,
  .ai-panel,
  .settings-sticky-header,
  .settings-sticky-header::before,
  .settings-sticky-footer {
    background-color: var(--theme-background-color) !important;
  }
}

/*
 * Animations
 */

:where(.application-chrome) {
  .nav-flyout-menu {
    @include gl-prefers-reduced-motion-transition;
    transition: opacity .2s $gl-easing-out-cubic;

    @starting-style {
      opacity: 0;
    }
  }

  @media (prefers-reduced-motion: no-preference) {
    .super-sidebar-nav-item {
      transition-duration: .2s;
      transition-timing-function: $gl-easing-out-cubic;
      transition-property: color, background-color;
    }

    .super-sidebar-animatable {
      .nav-item-link-label,
      .menu-section-button-label {
        transition-duration: .15s;
        transition-timing-function: $gl-easing-out-cubic;
        transition-property: opacity, translate;

        @starting-style {
          opacity: 0;
          translate: -30% 0;
        }
      }

      .super-sidebar-context-header {
        transition-duration: .15s;
        transition-timing-function: $gl-easing-out-cubic;
        transition-property: opacity, translate;

        @starting-style {
          opacity: 0;
          translate: 0 -30%;
        }
      }

      .nav-item-link-badge {
        transition-duration: .15s;
        transition-timing-function: $gl-easing-out-cubic;
        transition-property: opacity;

        @starting-style {
          opacity: 0;
        }
      }
    }
  }

  @supports (width: calc-size(auto, size)) {
    .super-sidebar.super-sidebar-toggled-manually,
    .panels-container {
      width: calc-size(auto, size);
      /* stylelint-disable-next-line property-no-unknown */
      interpolate-size: allow-keywords;
      transition: width .25s $gl-easing-out-cubic,
                  transform .25s $gl-easing-out-cubic !important;
    }
  }
}

// Issue sidebar
@include gl-container-width-up(md) {
  &.application-chrome {
    .work-item-attributes-wrapper {
      top: calc(#{$work-item-sticky-header-height} + #{$gl-spacing-scale-3}) !important;
      height: calc(var(--panel-content-inner-height) - var(--work-item-sticky-header-height) - 1.5rem + 1px) !important; // 1.5rem is to account for padding, the +1px is to account for a border
    }
  }

  .work-item-drawer .work-item-overview-right-sidebar {
    @apply gl-pb-10;
  }
}

@include gl-container-width-up(xl) {
  &.application-chrome {
    .boards-app.boards-app .issues-details-filters {
      @apply gl-px-5;
    }
  }
}

@include gl-container-width-down(xl) {
  &.application-chrome {
    .board-content {
      @apply gl-pt-3;
      @apply gl-px-3;
    }

    // Override Tailwind
    .boards-list.boards-list {
      @apply gl-mb-3;
    }
  }
}

.duo-chat-panel {
  @media (min-width: $breakpoint-lg) {
    width: var(--ai-navigation-rail-size);
  }

  @media (max-width: $breakpoint-lg - 1) {
    height: var(--ai-navigation-rail-size);
  }
}

.duo-chat-panel[data-expanded] {
  @media (min-width: $breakpoint-lg) {
    width: calc(var(--ai-panel-width) + var(--ai-panels-gap) + var(--ai-navigation-rail-size));
  }
}
